<!-- eslint-disable vue/no-mutating-props -->
<template>
<div class="struct-serve-item">
  <div v-if="isFolder" @click="toggle" class="struct-serve-name">
    <span :class="`trigger-folder ${open}`" ></span>
    <span>&nbsp; {{item.paramName}}</span>
  </div>
  <!-- 下级目录 -->
  <div v-if="isFolder" v-show="open" class="child-item">
    <StructItem v-for="member in item.memberList" :item="member" :componentsProps='componentsProps' :key="member.name" ref='structItem'></StructItem>
  </div>
  <!-- 最后一级 -->
  <div v-else>
    <position2D v-if="componentsProps[item.id + item.paramKey] && componentsProps[item.id + item.paramKey].x === item.paramKey" :item.sync='item' :prop="componentsProps[item.id + item.paramKey]" ref='position2D'></position2D>
    <el-form :rules="rules" :model='item' ref='structForm' class="params-item" :class="`${componentsProps[item.id + item.paramKey] && componentsProps[item.id + item.paramKey].y ? 'hide2d' : ''}`">
      <el-form-item v-if="item.hasRefSignal && !item.specs && item.category !== 'String' && item.category !== 'Struct'" class="params-item-form setting-select" required>
        <span slot='label' class="setting-select-label">{{ item.paramName }}</span>
        <el-select v-model="item.calcRelation" placeholder="请选择" class="select-type" ref='selectCalc' @blur="hideCalc">
          <el-option label="设置为" value="1"></el-option>
          <el-option label="增加" value="2"></el-option>
          <el-option label="减少" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-popover v-if="componentsProps[item.id + item.paramKey] && componentsProps[item.id + item.paramKey].widgetClassName === 'Radio'" placement="bottom" width="262" trigger="click">
        <el-radio-group v-model="item.value">
          <el-radio v-for="option in item.specs" :label="option.key" :key="option.key" class="service-value-radio-item">{{ option.name }}</el-radio>
        </el-radio-group>
        <el-form-item slot="reference" :label='item.paramName' class="params-item-form" :rules="rules.select">
          <el-input :value="item.specs.find(item2 => item2.key === item.value) && item.specs.find(item2 => item2.key === item.value).name" ref="serviceInput"></el-input>
        </el-form-item>
      </el-popover>
      <el-popover v-else-if="componentsProps[item.id + item.paramKey] && componentsProps[item.id + item.paramKey].widgetClassName === 'RadioButton'" placement="bottom" width="262" trigger="click">
        <el-radio-group v-model="item.value" :fill='componentsProps[item.id + item.paramKey].radioGroup_fill'>
          <el-radio-button v-for="option in item.specs" :label="option.key" :key="option.key">{{ option.name }}</el-radio-button>
        </el-radio-group>
        <el-form-item slot="reference" :label='item.paramName' class="params-item-form" :rules="rules.select">
          <el-input :value="item.specs.find(item2 => item2.key === item.value) && item.specs.find(item2 => item2.key === item.value).name" ref="serviceInput"></el-input>
        </el-form-item>
      </el-popover>
      <el-popover v-else-if="componentsProps[item.id + item.paramKey] && componentsProps[item.id + item.paramKey].widgetClassName === 'Slider'" placement="bottom" width="262" trigger="click">
        <el-slider
          v-model="item.value"
          :min='computeEdge(componentsProps[item.id + item.paramKey], item, "min")'
          :max='computeEdge(componentsProps[item.id + item.paramKey], item, "max")'
          :show-stops='componentsProps[item.id + item.paramKey].showStops'
          :step='componentsProps[item.id + item.paramKey].step'></el-slider>
        <el-form-item slot="reference" class="params-item-form" :rules="rules.input">
          <el-input :value="item.value" ref="serviceInput"></el-input>
          <el-popover v-if="item.discreteStr" placement="bottom-end" width="200" trigger="hover" :content="item.discreteStr" class="input-description" popper-class='desc-poper'>
            <svg-icon slot="reference" icon-class="说明"/>
          </el-popover>
        </el-form-item>
      </el-popover>
      <el-popover v-else-if="componentsProps[item.id + item.paramKey] && componentsProps[item.id + item.paramKey].widgetClassName === 'Switch'" placement="bottom" width="262" trigger="click">
        <el-switch
          v-model="item.value"
          :active-text="item.specs.find(item => item.key === 'true').name"
          :inactive-text="item.specs.find(item => item.key === 'false').name"
          :active-value='componentsProps[item.id + item.paramKey].activeValue'
          :inactive-value='componentsProps[item.id + item.paramKey].inactiveValue'
          :active-color='componentsProps[item.id + item.paramKey].activeColor'
          :inactive-color='componentsProps[item.id + item.paramKey].inactiveColor'>
        </el-switch>
        <el-form-item slot="reference" :label='item.paramName' class="params-item-form" :rules="rules.select">
          <el-input :value="item.specs.find(item2 => item2.key === item.value) && item.specs.find(item2 => item2.key === item.value).name" ref="serviceInput"></el-input>
        </el-form-item>
      </el-popover>
      <el-form-item v-else-if="componentsProps[item.id + item.paramKey] && componentsProps[item.id + item.paramKey].widgetClassName === 'ColorPicker'" :label='item.paramName' class="params-item-form" prop="value" :rules="rules.select">
        <el-color-picker v-model="item.value"></el-color-picker>
      </el-form-item>
      <el-form-item v-else-if="item.specs" :label='item.paramName' :rules="rules.select" class="params-item-form">
        <el-select v-model="item.value" :filterable='componentsProps[item.id + item.paramKey].filterable' placeholder="请选择">
          <el-option v-for="option in item.specs" :key="option.key" :label="option.name" :value="option.key">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-else-if="item.category === 'String'" :label='item.paramName' :rules="rules.input" class="params-item-form">
        <el-input v-model="item.value" placeholder="请输入"></el-input>
        <el-popover v-if="item.discreteStr" placement="bottom-end" width="200" trigger="hover" :content="item.discreteStr" class="input-description" popper-class='desc-poper'>
          <svg-icon slot="reference" icon-class="说明"/>
        </el-popover>
      </el-form-item>
      <el-form-item v-else :rules="rules.input" class="params-item-form" prop="value" :label="item.hasRefSignal ? undefined : item.paramName">
        <el-input-number v-model="item.value" :min="computeEdge(componentsProps[item.id + item.paramKey], item, 'min')" :max='computeEdge(componentsProps[item.id + item.paramKey], item, "max")' :precision="componentsProps[item.id + item.paramKey] ? componentsProps[item.id + item.paramKey].precision : undefined" placeholder="请输入" :controls='false' class="input-number"></el-input-number>
        <el-popover v-if="item.discreteStr" placement="bottom-end" width="200" trigger="hover" :content="item.discreteStr" class="input-description" popper-class='desc-poper'>
          <svg-icon slot="reference" icon-class="说明"/>
        </el-popover>
      </el-form-item>
      <div class="tool-bar">
        <svg-icon :icon-class="`参数${item.openParam.isOpen ? '已' : '未'}开放`" :className="`${item.openParam.isOpen} signal-open`" @click="paramOpen(item)"/>
      </div>
    </el-form>
  </div>
  <ParamOpen :show.sync='item.showParamOpen' :openParam.sync='item.openParam' :signalItem='item' ref='paramOpens' :prop="componentsProps[item.id + item.paramKey]"></ParamOpen>
</div>
</template>

<script>
import ParamOpen from './paramOpen.vue'
import position2D from './position2D.vue'

export default {
  name: 'StructItem',
  components: {
    position2D,
    ParamOpen
  },
  data() {
    return {
      open: true,
      rules: {
        select: [{ required: true, message: ' ', trigger: 'change' }],
        input: [{ required: true, message: ' ', trigger: 'blur' }]
      }
    }
  },
  props: {
    item: {
      type: Object,
      default: () => {
        return {
          value: ''
        }
      },
      required: true
    },
    componentsProps: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  mounted() {
  },
  computed: {
    // 控制是否有下级目录和显示下级目录
    isFolder() {
      return this.item.memberList && this.item.memberList.length
    }
  },
  watch: {
  },
  methods: {
    // 隐藏下拉框
    hideCalc() {
      setTimeout(() => {
        this.$refs.selectCalc.blur()
      }, 500)
    },
    toggle() {
      if (this.isFolder) {
        this.open = !this.open
      }
    },
    // 获取value范围 S2-2优先级大于S8
    computeEdge(componentsProps, member, type) {
      let edge
      if (type === 'min') {
        if (componentsProps && componentsProps.min) {
          edge = componentsProps.min
        } else {
          edge = member.physicalMin !== null ? member.physicalMin : -Infinity
        }
        if (member.calcRelation !== '1') { edge = 0 } // 相对值不考虑S2-2配置
        if (member.value < edge) { member.value = edge }
      } else {
        if (componentsProps && componentsProps.max) {
          edge = componentsProps.max
        } else {
          edge = member.physicalMax !== null ? member.physicalMax : Infinity
        }
        if (member.calcRelation !== '1') { edge = Infinity } // 相对值不考虑S2-2配置
        if (member.value > edge) { member.value = edge }
      }
      return edge
    },
    paramOpen(item) {
      item.showParamOpen = !item.showParamOpen
      if (!item.showParamOpen) {
        this.$refs.paramOpens.resetForm()
      }
    }
  }
}
</script>

<style lang="scss">
.service-item-edit .service-form .struct-serve-item{
  .struct-serve-name{
    line-height: 28px;
    .trigger-folder{
      display: inline-block;
      width: 1px;
      height: 1px;
      border-left: 5px solid #c0c4cc;
      border-top: 4px solid transparent;
      border-bottom: 4px solid transparent;
      &.true{
        transform: rotate(90deg);
      }
    }
  }
  .params-item{
    display: flex;
    align-items: flex-end;
    .params-item-form{
      flex: 1 0 auto;
      margin-bottom: 8px;
    }
    .setting-select-label{
      position: absolute;
      right: 10px;
      left: 10px;
    }
    .setting-select{
      position: relative;
      flex: 0 1 140px;
      .select-type{
        width: 132px;
      }
    }
    .tool-bar{
      margin-bottom: 8px;
      .signal-open{
        width: 16px;
        height: 32px;
        cursor: pointer;
        margin-left: 24px;
        margin-right: 2px;
        &.true{
          width: 18px;
          margin-right: 0;
        }
      }
    }
  }
  .hide2d {
    display: none;
  }
  .child-item{
    padding-left: 16px;
  }
}
</style>
